{% extends "base.html" %}

{% block js %}
<script src="{{ url_for('static', filename='js/todolist.js') }}"></script>
{% endblock %}

{% block body %}
<section class="header">
  <h2 class="title">{{todolist.title|title}}</h2>
  <div class="row">
    <div class="three columns value-prop"></div>
    <div class="six columns">
      {% if form.errors %}
        <div class="has-error"><strong>Todos should neither be empty nor be longer than 128 characters.</strong></div>
      {% endif %}
      <form method=post>
        {{ form.hidden_tag() }}
        <dl>
          <dd>{{ form.todo(class_="u-full-width", placeholder="Enter your todo", value="", maxlength=128) }}
          <dt>{{ form.submit }}
        </dl>
      </form>
    </div>
    <div class="row">
      <div class="one-half column open-todos">
        <h6 class="docs-header">{{ todolist.open_count }} open</h6>
        <ul>
          {% for todo in todolist.todos %}
            {% if not todo.is_finished %}
              <li><input type="checkbox" id="checkbox" data-todo-id="{{ todo.id }}"> {{ todo.description }}</li>
            {% endif %}
          {% endfor %}
        </ul>
      </div>
      <div class="one-half column finished-todos">
        <h6 class="docs-header">{{ todolist.finished_count }} finished</h6>
        <ul>
          {% for todo in todolist.todos %}
            {% if todo.is_finished %}
              <li><input type="checkbox" id="checkbox" data-todo-id="{{ todo.id }}" checked="checked"> {{ todo.description }}</li>
            {% endif %}
          {% endfor %}
        </ul>
      </div>
    </div>
  </div>
</section>
{% endblock %}
